<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ include file="/pub/includ.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<title>texiao4</title>
			
		  <link rel="stylesheet" type="text/css" href="<%=path %>/resources/texiao4/jquery.ad-gallery.css"/>
        <!-- load Galleria -->
        
		  <script type="text/javascript" src="<%=path %>/resources/texiao4/jquery.ad-gallery.js"></script>
		  <script type="text/javascript"> 
		  $(function() {
		    $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
		    $('img.image1').data('ad-title', 'Title through $.data');
		    $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
		    $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
		    var galleries = $('.ad-gallery').adGallery();
		    $('#switch-effect').change(
		      function() {
		        galleries[0].settings.effect = $(this).val();
		        return false;
		      }
		    );
		    $('#toggle-slideshow').click(
		      function() {
		        galleries[0].slideshow.toggle();
		        return false;
		      }
		    );
		    $('#toggle-description').click(
		      function() {
		        if(!galleries[0].settings.description_wrapper) {
		          galleries[0].settings.description_wrapper = $('#descriptions');
		        } else {
		          galleries[0].settings.description_wrapper = false;
		        }
		        return false;
		      }
		    );
		  });
		  </script>
				
		
		<style>
        
            * {
			    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
			    color: #333;
			    line-height: 140%;
			  }
			  select, input, textarea {
			    font-size: 1em;
			  }
			  body {
			    padding: 30px;
			    font-size: 70%;
			    width: 800px;
			  }
			  h2 {
			    margin-top: 1.2em;
			    margin-bottom: 0;
			    padding: 0;
			    border-bottom: 1px dotted #dedede;
			  }
			  h3 {
			    margin-top: 1.2em;
			    margin-bottom: 0;
			    padding: 0;
			  }
			  .example {
			    border: 1px solid #CCC;
			    background: #f2f2f2;
			    padding: 10px;
			  }
			  ul {
			    list-style-image:url(list-style.gif);
			  }
			  pre {
			    font-family: "Lucida Console", "Courier New", Verdana;
			    border: 1px solid #CCC;
			    background: #f2f2f2;
			    padding: 10px;
			  }
			  code {
			    font-family: "Lucida Console", "Courier New", Verdana;
			    margin: 0;
			    padding: 0;
			  }
			
			  #gallery {
			    padding: 30px;
			    background: #e1eef5;
			  }
			  #descriptions {
			    position: relative;
			    height: 50px;
			    background: #EEE;
			    margin-top: 10px;
			    width: 640px;
			    padding: 10px;
			    overflow: hidden;
			  }
			    #descriptions .ad-image-description {
			      position: absolute;
			    }
			      #descriptions .ad-image-description .ad-description-title {
			        display: block;
			      }

            
        </style>

		
	</head>

<body>		
	<div class="content">
        <div id="container">
    <h1>AD Gallery, gallery plugin for jQuery</h1>
    <p>A highly customizable gallery plugin for jQuery.</p>
    <p>Read more here: <a href="http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/" target="_blank">http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/</a> | <a href="http://coffeescripter.com/code/">More code at Coffeescripter.com</a></p>

    <div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="<%=path %>/resources/texiao4/images/1.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t1.jpg" class="image0"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/10.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t10.jpg" title="A title for 10.jpg" alt="This is a nice, and incredibly descriptive, description of the image 10.jpg" class="image1"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/11.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t11.jpg" title="A title for 11.jpg" longdesc="http://coffeescripter.com" alt="This is a nice, and incredibly descriptive, description of the image 11.jpg" class="image2"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/12.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t12.jpg" title="A title for 12.jpg" alt="This is a nice, and incredibly descriptive, description of the image 12.jpg" class="image3"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/13.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t13.jpg" title="A title for 13.jpg" alt="This is a nice, and incredibly descriptive, description of the image 13.jpg" class="image4"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/14.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t14.jpg" title="A title for 14.jpg" alt="This is a nice, and incredibly descriptive, description of the image 14.jpg" class="image5"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/2.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t2.jpg" title="A title for 2.jpg" alt="This is a nice, and incredibly descriptive, description of the image 2.jpg" class="image6"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/3.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t3.jpg" title="A title for 3.jpg" alt="This is a nice, and incredibly descriptive, description of the image 3.jpg" class="image7"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/4.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t4.jpg" title="A title for 4.jpg" alt="This is a nice, and incredibly descriptive, description of the image 4.jpg" class="image8"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/5.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t5.jpg" title="A title for 5.jpg" alt="This is a nice, and incredibly descriptive, description of the image 5.jpg" class="image9"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/6.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t6.jpg" title="A title for 6.jpg" alt="This is a nice, and incredibly descriptive, description of the image 6.jpg" class="image10"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/7.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t7.jpg" title="A title for 7.jpg" alt="This is a nice, and incredibly descriptive, description of the image 7.jpg" class="image11"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/8.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t8.jpg" title="A title for 8.jpg" alt="This is a nice, and incredibly descriptive, description of the image 8.jpg" class="image12"/>
              </a>
            </li>
            <li>
              <a href="<%=path %>/resources/texiao4/images/9.jpg">
                <img src="<%=path %>/resources/texiao4/images/thumbs/t9.jpg" title="A title for 9.jpg" alt="This is a nice, and incredibly descriptive, description of the image 9.jpg" class="image13"/>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div id="descriptions">

    </div>

    <p>Examples of how you can alter the behaviour on the fly;
    Effect: <select id="switch-effect">
      <option value="slide-hori">Slide horizontal</option>
      <option value="slide-vert">Slide vertical</option>
      <option value="resize">Shrink/grow</option>
      <option value="fade">Fade</option>
      <option value="">None</option>
    </select>
    <br/>
    <a href="#" id="toggle-slideshow">Toggle slideshow</a> |
    <a href="#" id="toggle-description">Toggle having description outside of image</a>
    </p>
  </div>

    </div>
    <script>

    // Load the classic theme
    Galleria.loadTheme('<%=path %>/resources/texiao3/galleria.classic.min.js');
    
    // Initialize Galleria
    $('#galleria').galleria();

    </script>


</body>
</html>
